<template>
	<view class="i-coupon">
		<!-- 标题信息 -->
		<view class="flex bw-title">
			<view class="flex-sub bw-title-left"><text>优惠券</text></view>
			<view class="flex-sub bw-title-right">
				<navigator url="/pages/detail/detail" class="cu-item arrow">
					<text>使用说明</text>
				</navigator>
			</view>
		</view>
		<view class="i-coupon-h1">
			—本味优惠券—
		</view>
		<!-- 优惠券列表 -->
		<view class="coupon-list">
			<veiw class="bw-coupon-item" v-for="(item,index) in couponList" :key="index">
				<view class="coupon-title">
					{{item.coupon_name}}
				</view>
				<view class="coupon-time">
					有效期：{{item.effective_past_time}}
				</view>
				<view class="coupon-remark">
					限本味到店使用，单张使用不叠加
				</view>

			</veiw>
		</view>

	</view>
</template>

<script>
	import api from '@/api/index.js';
	//通过命名空间的方式映入
	import {
		createNamespacedHelpers
	} from 'vuex'
	//获取需要管理的方法
	const {
		mapState,
		mapActions,
		mapMutations
	} = createNamespacedHelpers('user')
	export default {

		data() {
			return {
				couponList: []
			};
		},
		/**
		 * 计算属性
		 * @type {Object}
		 */
		computed: {
			...mapState(['userInfo']),
		},
		onLoad() {
			if (JSON.stringify(this.userInfo) == "{}") {
				uni.navigateTo({
					url: '/pages/login/login'
				});
				return;
			}
			this.get_coupon();
		},
		methods: {
			get_coupon() {
				let data = {
					"open_id": this.userInfo.openId
				}
				api.benwei.get_coupon(data).then(response => {
					console.log("优惠券", response)
					this.couponList = response;
				});
			}
		}
	};
</script>

<style>
	.bw-title-left {
		padding-top: 40rpx;
		padding-left: 40rpx;
		line-height: 30rpx;
		font-size: 20px;
	}

	.bw-title-right {
		text-align: right;
		font-size: 12px;
		padding-top: 50rpx;
		padding-right: 50rpx;
		color: #999;
	}

	.bw-coupon-item {
		display: block;
		margin: 10rpx auto;
		border-radius: 5px;
		background: #fff;
		width: 90%;
		border-bottom: 3px solid #39B54A;
		padding: 20rpx;
	}

	.coupon-title {
		margin-top: 20rpx;
		font-size: 18px;
		line-height: 20px;
		margin-bottom: 30rpx;
	}

	.i-coupon-h1 {
		line-height: 30px;
		padding: 20rpx;
		text-align: center;
		font-size: 12px;
		color: #1CBBB4;
	}

	.coupon-time,
	.coupon-remark {
		font-size: 12px;
		color: #1CBBB4;
		line-height: 50rpx;
	}
</style>
